<template>
  <div class="collapse_box">
    <div class="flex gap-4 mb-4" style="margin: 12px 0">
      <span style="margin-right: 12px">当前被点击的折叠项索引:</span>
      <span>{{ clickActiveName || "--" }}</span>
    </div>
    <el-collapse v-model="activeNamesArr" @change="collapseChange">
      <slot />
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const activeNamesArr = ref([]); // 绑定折叠面板，string（手风琴模式）/ array（非手风琴模式）
const clickActiveName = ref(null); // 折叠面板操作当前操作的元素索引

/**
 * 监听折叠面板
 * 当初次展开折叠面板，折叠面板操作当前操作的元素索引为折叠面板返回数组中的第1项元素
 * 之后展开折叠面板，对比新旧数组的不同，不同的元素即为折叠面板操作当前操作的元素索引
 */
// 监听 activeNamesArr 的变化
watch(activeNamesArr, (newArr, oldArr) => {
  if (oldArr.length === 0) {
    clickActiveName.value = newArr[0];
  } else {
    const difference = oldArr
      .filter((item) => !newArr.includes(item))
      .concat(newArr.filter((item) => !oldArr.includes(item)));
    clickActiveName.value = difference[0];
  }
});

const collapseChange = () => {};

defineExpose({
  activeNamesArr,
});
</script>

<style lang="less" scoped></style>
